<template>
  <div class="main">
    <img src="~img/img-header.png" alt="img-header" class="home-img">
    <rank-list v-if="isShowRank" :myRank="myRank" :allRank="allRank" :userStatus="userStatus"></rank-list>
    <reward-list v-if="isShowReward" :allRank="allRank"></reward-list>
    <img src="~img/img-detail.png" alt="img-header" class="home-img">
    <div class="btn" :class="{grey: isBtnGrey}" @click="handleBtnClick" v-if="isShowBtn">{{ btnText }}</div>
    <share-pic :isShowShare="isShowShare" @closeShare="closeShare" :myRank="myRank"></share-pic>
    <prize-info :isShowPrize="isShowPrize" :prizeInfo="userPrizeInfo" :isFinish="isFinish" @closePrize="closePrize"></prize-info>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState, mapMutations } from 'vuex'
import { iosDownload, androidDownload, isIos, isAndroid, activityId, pushCard, addShare, queryUrl, isSubmitInfoUrl } from 'common/base.js'
import RankList from './components/Rank.vue'
import RewardList from './components/Reward.vue'
import SharePic from './components/Share.vue'
import PrizeInfo from './components/Prize.vue'
export default {
  name: 'Home',
  data () {
    return {
      btnText: '马上参与',
      activityStatus: '',
      userStatus: '',
      myRank: {},
      allRank: [],
      isShowPrize: false,
      isShowShare: false,
      isShowBtn: true,
      userPrizeInfo: {},
      isFinish: -1,
      isBtnGrey: false,
      isWinner: false
    }
  },
  computed: {
    ...mapState({
      mid: 'mid'
    }),
    isShowRank () {
      if (this.activityStatus === 2) {
        return true
      }
      return false
    },
    isShowReward () {
      if (this.activityStatus === 3) {
        return true
      }
      return false
    }
  },
  components: {
    RankList,
    RewardList,
    SharePic,
    PrizeInfo
  },
  methods: {
    ...mapMutations(['changeMid']),
    getHomeInfo (mid) {
      axios.get(queryUrl, {
        params: {
          activityId: activityId,
          mid: mid
        }
      }).then(this.getHomeInfoSuccess)
    },
    closePrize (val) {
      this.isShowPrize = false
      this.move()
      if (val) {
        this.btnText = '已填写奖品信息,等待发放奖品'
      }
    },
    closeShare () {
      this.isShowShare = false
    },
    getHomeInfoSuccess (res) {
      console.log(res)
      res = res.data
      if (res.code === 0 && res.data) {
        let data = res.data
        console.log(data)
        this.activityStatus = data.activityStatus
        this.userStatus = data.userStatus
        this.myRank = data.myRank
        this.allRank = data.allRank
        this.handleActivityStatus(data)
      }
    },
    goSignUp () {
      this.$router.push('/sign')
    },
    handleBtnClick () {
      if (this.mid !== null) {
        if (this.activityStatus !== '') {
          switch (this.activityStatus) {
            case 0:
              break
            case 2:
              this.setBtnProgress()
              break
            case 3:
              if (this.isWinner) {
                this.isShowPrize = true
                this.stop()
              }
              break
          }
        }
      } else {
        this.handleDownload()
      }
    },
    setBtnProgress () {
      switch (this.userStatus) {
        case 0:
          this.goSignUp()
          break
        case 2:
          console.log(22)
          pushCard()
          break
        case 3:
          this.isShowShare = true
          break
      }
    },
    handleDownload () {
      if (isIos) {
        window.location.href = iosDownload
      } else if (isAndroid) {
        window.location.href = androidDownload
      } else {
        window.location.href = androidDownload
      }
    },
    handleActivityStatus (data) {
      switch (this.activityStatus) {
        case 0:
          this.activityAwatiToStart()
          break
        case 2:
          this.activityInProgress(data)
          break
        case 3:
          this.activityIsEnd(data)
          break
      }
    },
    activityAwatiToStart () {
      this.btnText = '活动马上开始'
      this.isBtnGrey = true
    },
    activityInProgress (data) {
      switch (this.userStatus) {
        case 0:
          this.btnText = '点击报名'
          break
        case 2:
          this.btnText = '运动打卡'
          this.isShowShare = true
          break
        case 3:
          this.btnText = '成功完赛'
          break
      }
    },
    activityIsEnd (data) {
      switch (this.userStatus) {
        case 0:
        case 2:
          this.isShowBtn = false
          break
        case 3:
          let isWinner = data.myRank.isWinner
          this.userIsWinner(isWinner)
          break
      }
    },
    userIsWinner (isWinner) {
      if (isWinner === 1) {
        this.isWinner = true
        axios.get(isSubmitInfoUrl, {
          params: {
            activityId: activityId,
            mid: this.mid
          }
        }).then(this.getisWinnersuccess)
      } else {
        this.isShowBtn = false
      }
    },
    stop () {
      document.body.style.height = '100%'
      document.body.style.overflow = 'hidden'
    },
    move () {
      document.body.style.overflow = ''
      document.body.style.height = ''
    },
    getisWinnersuccess (res) {
      res = res.data
      console.log(res)
      if (res.code === 0) {
        let data = res.data
        if (data.isFinish === 1) {
          this.isFinish = 1
          this.btnText = '已填写领奖信息,等待发放奖品'
          this.userPrizeInfo = res.data
        } else if (data.isFinish === 0) {
          this.isFinish = 0
          this.btnText = '填写地址,领取奖品'
        }
      }
    }
  },
  mounted () {
    addShare()
    console.log(this.mid)
    if (this.mid) {
      this.getHomeInfo(this.mid)
    } else { // 第一次访问
      let mid = this.$route.query.mid
      console.log(mid)
      if (mid) {
        this.changeMid(mid)
        this.getHomeInfo(mid)
      } else {
        this.btnText = '下载分动圈'
      }
    }
  }
}
</script>

<style lang='stylus' scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .main
    background-color $bgColor
    .home-img
      width 100%
    .btn
      position fixed
      bottom .3rem
      left 0
      right 0
      width 89%
      height $height
      line-height $height
      margin auto
      color #fff
      text-align center
      font-size $bigSize
      background-color #d51f1a
      border-radius(.44rem)
      &.grey
        background-color #888
</style>
